@extends('admin.layout.app')

@section('title', '發佈公告')
@section('menu', broute('notice.index'))

@section('style')
<style>
.template-item{
    padding: 5px 0;
    margin: 5px 10px;
    border-bottom: mediumseagreen solid 1px;
}
</style>
@endsection

@section('content')
    <div class="layui-col-lg12">
        <div class="layui-card">
            <div class="layui-card-header">
                <div class="roles_create_back">
                    發佈公告
                </div>
            </div>
            <div class="layui-card-body">
                <form class="layui-form" method="post" action="@broute('notice.update')">
                    <div class="layui-form-item">
                        <label class="layui-form-label">類別</label>
                        <div class="layui-inline">
                            <select name="type" required lay-verify="required" lay-vertype="tips">
                                <option value="">選擇類別</option>
                                @foreach ($types ?? [] as $key => $type_name)
                                    @if (($row['type']??'') == $key)
                                        <option value="{{$key}}" selected>{{$type_name}}</option>
                                    @else
                                        <option value="{{$key}}">{{$type_name}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">標題</label>
                        <div class="layui-input-inline" style="width:400px">
                            <input type="text" name="title" placeholder="請輸入標題" autocomplete="off" class="layui-input" value="{{ $row['title']??'' }}" required lay-verify="required" lay-vertype="tips" @isset($row['color']) style="color: {{$row['color']}}" @endisset>
                        </div>
                        <div class="layui-input-inline">
                            <select name="color" lay-filter="color">
                                    <option value="">選擇顏色</option>
                                    @foreach ($colors??[] as $color => $color_name)
                                        @if (($row['color']??'') == $color)
                                            <option value="{{$color}}" selected>{{$color_name}}</option>
                                        @else
                                            <option value="{{$color}}">{{$color_name}}</option>
                                        @endif
                                    @endforeach
                                </select>
                        </div>
                    </div>

                    <div class="layui-form-item" style="position: relative;z-index: 1">
                        <label class="layui-form-label">內容</label>
                        <div class="layui-input-block">
                        <textarea id="container" name="content" placeholder="請輸入描述" >{{$row['content']??''}}</textarea>
                            @include('vendor.ueditor.assets')
                            <!-- 實例化編輯器 -->
                            <script type="text/javascript">
                            var ue = UE.getEditor('container', {lang:"zh-hk", autoHeightEnabled:true, initialFrameWidth: null,initialFrameHeight:400,autoFloatEnabled:false});
                            ue.ready(function() {
                                ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 設置 CSRF token.
                            });
                            </script>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">&nbsp;</label>
                        <div class="layui-input-block">
                            <a class="layui-btn layui-btn-primary" href="javascript:;" id="template_selector">
                                <i class="layui-icon layui-icon-templeate-1"></i>
                                選擇模板
                            </a>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">顯示</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="state" lay-skin="switch" @if(isset($row['state']) && !$row['state']) @else checked @endempty lay-text="ON|OFF" value="1">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">時間設定</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input layui-datetime" name="start_at" value="{{$row['start_at']??''}}" autocomplete="off">
                        </div>
                        <div class="layui-input-inline" style="width:5px">-</div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input layui-datetime" name="deadline_at" value="{{$row['deadline_at']??''}}" autocomplete="off">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            @empty($row['id'])
                            <input type="hidden" name="admin_id" value="{{\Auth::guard('admin')->user()->id}}">
                            @else
                            <input type="hidden" name="id" value="{{$row['id']}}">
                            <input type="hidden" name="admin_id" value="{{$row['admin_id']}}">
                            @endempty
                            <button class="layui-btn" lay-submit lay-filter="submitform11">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    $(function() {
        layui.use(['laydate'], function() {
            var laydate = layui.laydate;
            laydate.render({
                elem: '[name=start_at]',
                type: 'date',
                // format: 'yyyy-MM-dd HH:mm:ss',
            });
            laydate.render({
                elem: '[name=deadline_at]',
                type: 'date',
                // format: 'yyyy-MM-dd HH:mm:ss',
            });
        });
    });

    $('#template_selector').click(function() {
        $.ajax({
            url: "@broute('notice.template.load')",
            dataType: 'json',
            type: 'get',
            success: function(json) {
                if (!json.status) {
                    layer.msg(json.message||'error', function() {});
                    return false;
                }
                window.layerIndex = layer.tab({
                    area: ['700px', '400px'],
                    tab: json.data
                });
            },
            error: function() {
                //
            }
        });
    });

    $(document).on('dblclick', '.template-item', function() {
        var $this = $(this);
        ue.setContent($this.html());
        layer.close(window.layerIndex);
    });

    form.on('select(color)', function(data){
        $('input[name=title]').css('color', data.value);
    });
</script>
@endsection
